<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="zuoye.css">
</head>
<body>
    <div class = "biggest">
        <header class="site-head">
            <div class="topbar">
                <img src="images/logo.png" alt="">
                <ul>
                    <li><a>HOME</a></li>
                    <li><a>ABOUT</a></li>
                    <li><a>GALLERY</a></li>
                    <li><a>FACULTY</a></li>
                    <li><a>EVENTS</a></li>
                    <li><a>CONTACT</a></li>
                </ul>
            </div>
        </header>
        <section class="banner">
            <img src="images/banner3.jpg" alt="">
            <div class="name">
                <input type="text" value="your Name">
            </div>
            <div class="phone">
                <input type="text" value="your Phone">
            </div>
            <div class="email">
                <input type="text" value="your Email">
            </div>
            <div class="here">
                <input type="text" value="Write Your Comment Here">
            </div>
        </section>
        <section class="about common-part">
            <div class="text-about">
                <h1>ABOUT</h1>
                <div class="line"></div>
                <div class="text-content">
                    <h6 clss="one">Lorem Ipsum is simply dummy text of the printing and typesetting</h6>
                    <h6>industry. Lorem Ipsum has been the insustry's stantard dummy</h6>
                    <h6>text ever since the 1500s</h6>
                </div>
            </div>
            <div class="center">
                <ul>
                    <li class="textpart1">
                        <h1>A WORD ABOUT US</h1>
                        <div class="next">
                            <h6>
                                Praesent dignissim viverra est, sed<br>
                                bibendum liguala congue non. Sed ac nis<br>
                                let felis gravida commodo? Suspendisse<br>
                                ege ullamcorper ipsum. Suspendisse<br>
                                diam amet.
                            </h6>
                            <button>EXPLORE</button>
                        </div>
                    </li>
                    <li class="pic">
                        <img src="images/bb3.jpg" alt="">
                    </li>
                    <li class="textpart2">
                        <div class="one common-style">
                            <h1>70000</h1>
                            <div class="line"></div>
                            <h6>Students</h6>
                        </div>
                        <div class="two common-style">
                            <h1>600</h1>
                            <div class="line"></div>
                            <h6>Faculty</h6>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <section class="room">
            <ul>
                <li class="pic">
                    <img src="images/b1.jpg" alt="">
                    <div class="sanjiao1"></div>
                </li>
                <li class="text">
                    <h1>
                        Library
                    </h1>
                    <h3>
                        Lorem Ipsum is simply dummy text of the <br>
                        printing and typesetting industry
                    </h3>
                    <h6>
                        Lorem Ipsum has been the industry's standard summy<br>
                        text ever since the 1500s, when an unknown printer took<br>
                        a galley of type and scrambled it to make a type<br>
                        specimen boook.
                    </h6>
                    <button>
                        EXPLORE
                    </button>
                </li>
                <li class="pic">
                    <img src="images/b2.jpg" alt="">
                    <div class="sanjiao1"></div>
                </li>
                <li class="text">
                    <h1>
                        Computer Lab
                    </h1>
                    <h3>
                        Lorem Ipsum is simply dummy text of the <br>
                        printing and typesetting industry
                    </h3>
                    <h6>
                        Lorem Ipsum has been the industry's standard summy<br>
                        text ever since the 1500s, when an unknown printer took<br>
                        a galley of type and scrambled it to make a type<br>
                        specimen boook.
                    </h6>
                    <button>
                        EXPLORE
                    </button>
        
                </li>
                <li class="text">
                    <h1>
                        Conference Hall
                    </h1>
                    <h3>
                        Lorem Ipsum is simply dummy text of the <br>
                        printing and typesetting industry
                    </h3>
                    <h6>
                        Lorem Ipsum has been the industry's standard summy<br>
                        text ever since the 1500s, when an unknown printer took<br>
                        a galley of type and scrambled it to make a type<br>
                        specimen boook.
                    </h6>
                    <button>
                        EXPLORE
                    </button>
                </li>
                <li class="pic">
                    <img src="images/b3.jpg" alt="">
                    <div class="sanjiao2"></div>
                </li>
                <li class="text">
                    <h1>
                        Play Ground
                    </h1>
                    <h3>
                        Lorem Ipsum is simply dummy text of the <br>
                        printing and typesetting industry
                    </h3>
                    <h6>
                        Lorem Ipsum has been the industry's standard summy<br>
                        text ever since the 1500s, when an unknown printer took<br>
                        a galley of type and scrambled it to make a type<br>
                        specimen boook.
                    </h6>
                    <button>
                        EXPLORE
                    </button>
                </li>
                <li class="pic">
                    <img src="images/b4.jpg" alt="">
                    <div class="sanjiao2"></div>
                </li>
            </ul>
        </section>
        <section class="gallery common-part">
            <div class="text-about">
                <h1>GALLERY</h1>
                <div class="line"></div>
                <div class="text-content">
                    <h6 clss="one">Lorem Ipsum is simply dummy text of the printing and typesetting</h6>
                    <h6>industry. Lorem Ipsum has been the insustry's stantard dummy</h6>
                    <h6>text ever since the 1500s</h6>
                </div>
            </div>
            <div class="picpart">
                <ul>
                    <li>
                        <img src="images/03-01.jpg" alt="">
                        <div>SCIENCE LAB</div>
                    </li>
                    <li>
                        <img src="images/03-02.jpg" alt="">
                        <div>INDOOR STADIUM</div>
                    </li>
                    <li>
                        <img src="images/03-03.jpg" alt="">
                        <div>TRANSPORTATION</div>
                    </li>
                    <li>
                        <img src="images/03-04.jpg" alt="">
                        <div>KIDS ROOM</div>
                    </li>
                    <li>
                        <img src="images/03-05.jpg" alt="">
                        <div>MEDITATION CLASSES</div>
                    </li>
                    <li>
                        <img src="images/03-06.jpg" alt="">
                        <div>KIDS PLAY GROUND</div>
                    </li>
                </ul>
            </div>
        </section>
        <footer>
            <div class="foot">
                @ 2016 imooc.com 京ICP备13046642号
            </div>
        </footer>
    <!-- </div>
    <header class="site-head">
        <div class="topbar">
            <img src="images/logo.png" alt="">
            <ul>
                <li><a>HOME</a></li>
                <li><a>ABOUT</a></li>
                <li><a>GALLERY</a></li>
                <li><a>FACULTY</a></li>
                <li><a>EVENTS</a></li>
                <li><a>CONTACT</a></li>
            </ul>
        </div>
    </header>
    <section class="banner">
        <img src="images/banner3.jpg" alt="">
        <div class = "name">
            <input type="text" value = "your Name">
        </div>
        <div class="phone">
            <input type="text" value = "your Phone">
        </div>
        <div class="email">
            <input type="text" value = "your Email">
        </div>
        <div class="here">
            <input type="text" value = "Write Your Comment Here">
        </div>
    </section>
    <section class="about common-part">
        <div class = "text-about">
            <h1>ABOUT</h1>
            <div class="line"></div>
            <div class="text-content">
                <h6 clss = "one">Lorem Ipsum is simply dummy text of the printing and typesetting</h6>
                <h6>industry. Lorem Ipsum has been the insustry's stantard dummy</h6>
                <h6>text ever since the 1500s</h6>
            </div>
        </div>
        <div class="center">
            <ul>
                <li class = "textpart1">
                    <h1>A WORD ABOUT US</h1>
                    <div class="next">
                        <h6>
                            Praesent dignissim viverra est, sed<br>
                             bibendum liguala congue non. Sed ac nis<br>
                             let felis gravida commodo? Suspendisse<br>
                            ege ullamcorper ipsum. Suspendisse<br>
                            diam amet.
                        </h6>
                        <button>EXPLORE</button>
                    </div>
                </li>
                <li class = "pic">
                    <img src="images/bb3.jpg" alt="">
                </li>
                <li class = "textpart2">
                    <div class="one common-style">
                        <h1>70000</h1>
                        <div class="line"></div>
                        <h6>Students</h6>
                    </div>
                    <div class="two common-style">
                        <h1>600</h1>
                        <div class="line"></div>
                        <h6>Faculty</h6>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <section class="room">
        <ul>
            <li class = "pic">
                <img src="images/b1.jpg" alt="">
                <div class="sanjiao1"></div>
            </li>
            <li class = "text">
                <h1>
                    Library
                </h1>
                <h3>
                    Lorem Ipsum is simply dummy text of the <br>
                    printing and typesetting industry
                </h3>
                <h6>
                    Lorem Ipsum has been the industry's standard summy<br>
                    text ever since the 1500s, when an unknown printer took<br>
                    a galley of type and scrambled it to make a type<br>
                    specimen boook.
                </h6>
                <button>
                    EXPLORE
                </button>
            </li>
            <li class = "pic">
                <img src="images/b2.jpg" alt="">
                <div class="sanjiao1"></div>
            </li>
            <li class = "text">
                <h1>
                    Computer Lab
                </h1>
                <h3>
                    Lorem Ipsum is simply dummy text of the <br>
                    printing and typesetting industry
                </h3>
                <h6>
                    Lorem Ipsum has been the industry's standard summy<br>
                    text ever since the 1500s, when an unknown printer took<br>
                    a galley of type and scrambled it to make a type<br>
                    specimen boook.
                </h6>
                <button>
                    EXPLORE
                </button>
                
            </li>
            <li class="text">
                <h1>
                    Conference Hall
                </h1>
                <h3>
                    Lorem Ipsum is simply dummy text of the <br>
                    printing and typesetting industry
                </h3>
                <h6>
                    Lorem Ipsum has been the industry's standard summy<br>
                    text ever since the 1500s, when an unknown printer took<br>
                    a galley of type and scrambled it to make a type<br>
                    specimen boook.
                </h6>
                <button>
                    EXPLORE
                </button>
            </li>
            <li class = "pic">
                <img src="images/b3.jpg" alt="">
                <div class="sanjiao2"></div>
            </li>
            <li class = "text">
                <h1>
                    Play Ground
                </h1>
                <h3>
                    Lorem Ipsum is simply dummy text of the <br>
                    printing and typesetting industry
                </h3>
                <h6>
                    Lorem Ipsum has been the industry's standard summy<br>
                    text ever since the 1500s, when an unknown printer took<br>
                    a galley of type and scrambled it to make a type<br>
                    specimen boook.
                </h6>
                <button>
                    EXPLORE
                </button>
            </li>
            <li class = "pic">
                <img src="images/b4.jpg" alt="">
                <div class="sanjiao2"></div>
            </li>
        </ul>
    </section>
    <section class="gallery common-part">
        <div class="text-about">
            <h1>GALLERY</h1>
            <div class="line"></div>
            <div class="text-content">
                <h6 clss="one">Lorem Ipsum is simply dummy text of the printing and typesetting</h6>
                <h6>industry. Lorem Ipsum has been the insustry's stantard dummy</h6>
                <h6>text ever since the 1500s</h6>
            </div>
        </div>
        <div class="picpart">
            <ul>
                <li>
                    <img src="images/03-01.jpg" alt="">
                    <div>SCIENCE LAB</div>
                </li>
                <li>
                    <img src="images/03-02.jpg" alt="">
                    <div>INDOOR STADIUM</div>
                </li>
                <li>
                    <img src="images/03-03.jpg" alt="">
                    <div>TRANSPORTATION</div>
                </li>
                <li>
                    <img src="images/03-04.jpg" alt="">
                    <div>KIDS ROOM</div>
                </li>
                <li>
                    <img src="03-05.jpg" alt="">
                    <div>MEDITATION CLASSES</div>
                </li>
                <li>
                    <img src="images/03-06.jpg" alt="">
                    <div>KIDS PLAY GROUND</div>
                </li>
            </ul>
        </div>
    </section>
    <footer>
        <div class="foot">
            @ 2016 imooc.com 京ICP备13046642号
        </div>
    </footer> -->
</body>
</html>